<template>
  <view class="container">
    <view class="car-model-card">
      <view class="card-title">
        <text>{{ form.modelName }}</text>
        <text class="card-title-tag" v-if="form.useNum > form.stockNum">超卖</text>
      </view>
      <view class="stock-state">
        <text class="stock-state-text">库存：</text>
        <text class="stock-state-value">{{ form.useNum }}/{{ form.stockNum }}</text>
        <!-- 提示 -->
        <ve-tooltip>
          <template #content>
            X/Y X为当前订单占用此车型数量；
            <view>Y为当前门店此车型对应车辆总数</view>
          </template>
          <ve-icon style="margin-left: 12rpx" name="help" size="36" />
        </ve-tooltip>
      </view>
      <view class="card-divider"></view>
      <view class="car-tag-list">
        <view class="car-tag-item" v-for="(item, index) in form.carList" :key="index" :style="tagBackgroundColor(item)">{{
          item.licenseNo
        }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getCarModelStock } from '@/api/asset/car-stock'
  const form = ref({})

  const statistics = ref({})
  onLoad(({ params }) => {
    const r_params = JSON.parse(params)
    if (r_params.siteId) {
      getDetail(r_params)
    }
  })

  const getDetail = (record) => {
    getCarModelStock({ ...record, detail: 1 }).then((res) => {
      if (res.code == 200) {
        form.value = res.result.list[0]
        statistics.value = res.result.statistics
      }
    })
  }
  /**
   * 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
   *
   */
  const tagBackgroundColor = (item) => {
    if (item) {
      if (item.type == 0) {
        return { background: '#FFFFFF', border: '2rpx solid #E5E5E5', color: '#191C27' }
      } else if (item.type == 1) {
        return {
          background: '#99DB6E',
        }
      } else if (item.type == 2) {
        return {
          background: '#7299FF',
        }
      } else if (item.type == 3) {
        return {
          background: '#F6D45F',
        }
      } else if (item.type == 4) {
        return {
          background: '#998EFF',
        }
      } else if (item.type == 5) {
        return {
          background: '#FF7889',
        }
      } else if (item.type == 6) {
        return {
          background: '#B7BFD0',
        }
      }
      return {}
    }
  }
</script>

<style lang="scss" scoped>
  .car-model-card {
    margin: 24rpx;
    min-height: 200rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    padding: 24rpx;
    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #191c27;
      .card-title-tag {
        display: inline-block;
        width: 80rpx;
        height: 36rpx;
        background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        opacity: 1;
        border: 2rpx solid #ffffff;
        border-radius: 30rpx;
        text-align: center;
        line-height: 36rpx;
        margin-left: 20rpx;
      }
    }
    .stock-state {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      .stock-state-text {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #4e5969;
      }
      .stock-state-value {
        margin-left: 4rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d2129;
      }
    }
    .card-divider {
      margin-top: 32rpx;
      margin-bottom: 24rpx;
      height: 2rpx;
      background: rgba(216, 216, 216, 0.3);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
    .car-tag-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-left: -20rpx;
      .car-tag-item {
        width: 204rpx;
        height: 60rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        text-align: center;
        line-height: 60rpx;
        margin-bottom: 32rpx;
        margin-left: 20rpx;
      }
    }
    .look-more-btn {
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
    }
  }
</style>
